<template>
  <div class="details container">
    <h1 class="page-header">
      {{ user.name }}
      <el-button link type="primary" @click="navigateToHome">返回</el-button>
      <span class="pull-right">
        <el-button
          @click="navigateToEdit"
          type="primary"
          style="margin-right: 10px"
          >修改</el-button
        >
        <el-button @click="dialogVisible = true" type="danger">删除</el-button>
      </span>
    </h1>
    <el-card class="box-card">
      <template v-slot:header>
        <span>用户信息</span>
      </template>
      <ul class="list-group">
        <li class="list-group-item">
          <el-icon class="icon"><duyi-icon-cellphone /></el-icon> 电话：{{
            user.phone
          }}
        </li>
        <li class="list-group-item">
          <el-icon class="icon"><duyi-icon-message /></el-icon> 邮箱：{{
            user.email
          }}
        </li>
      </ul>
    </el-card>
    <el-card class="box-card">
      <template v-slot:header>
        <span>教育与职业</span>
      </template>
      <ul class="list-group">
        <li class="list-group-item">
          <el-icon class="icon"><duyi-icon-reading /></el-icon> 文化水平：{{
            user.education
          }}
        </li>
        <li class="list-group-item">
          <el-icon class="icon"><duyi-icon-collection /></el-icon> 毕业院校：{{
            user.graduationschool
          }}
        </li>
        <li class="list-group-item">
          <el-icon class="icon"><duyi-icon-postcard /></el-icon> 专业：{{
            user.profession
          }}
        </li>
        <li class="list-group-item">
          <el-icon class="icon"><duyi-icon-user /></el-icon> 个人简介：{{
            user.profile
          }}
        </li>
      </ul>
    </el-card>
  </div>
  <!-- 删除学生弹出框 -->
  <el-dialog v-model="dialogVisible" title="提示" width="500">
    <span>是否要删除该学生？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteUser"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { useUserStore } from "~/stores";
const store = useUserStore();
const route = useRoute();
const router = useRouter();
const id = route.params.id;

let user = {
  name: "",
  phone: "",
  email: "",
  education: "",
  graduationschool: "",
  profession: "",
  profile: "",
};
user = store.getUserById(id);

const dialogVisible = ref(false);

const navigateToHome = () => {
  router.push("/");
};
const navigateToEdit = () => {};
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}
.icon {
  position: relative;
  top: 2px;
  margin-right: 5px;
}
.pull-right {
  float: right;
}
</style>
